<template>
  <div class="head_nav">
    <!-- <meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/> -->
    <!-- 开启顶部安全区适配 -->
    <van-nav-bar
      safe-area-inset-top
      :title="title"
      fixed
      :border="border"
      :left-arrow="leftArrow"
      @click-left="handleBackGo"
    >
      <!-- <template #right>
        <div class="bar">
          <div
            class="search"
            @click="handleSearch">
            <img
              src="@/assets/images/searchbar.png"
              alt=""
              style="width: 33px; height: 32px"
            />
          </div>
          <div class="bar2">
            <div
              class="left-btn"
              @click="showActionSheet">
              <img
                src="@/assets/images/group.png"
                alt=""
                style="width: 22px; height: 22px"
              />
            </div>
            <van-action-sheet
              v-model="show"
              :actions="actions"
              cancel-text="取消"
              close-on-click-action
              @cancel="onCancel"
              @select="onSelect"
              safe-area-inset-bottom
            />

            <div class="fen"></div>
            <div
              class="right-btn"
              @click="closeClick">
              <img
                src="@/assets/images/group2.png"
                alt=""
                class="imgGroup2"
                style="width: 24px; height: 24px"
              />
            </div>
          </div>
        </div>
      </template> -->
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  name: 'HeadNav',
  props: {
    title: {
      type: String,
      require: true,
      default: ''
    },
    border: {
      type: Boolean,
      required: false,
      default: false
    },
    leftArrow: {
      type: Boolean,
      required: false,
      default: false
    }

  },

  data () {
    return {
      show: false,
      actions: [{ name: '关于认证应用' }]
    }
  },
  methods: {
    closeClick () {
      console.log('headnav')
      const u = navigator.userAgent
      const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // g
      const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
      if (isAndroid) {
        window.WebViewJavascriptBridge.callHandler(
          'closed',
          {},
          function (data) {}
        )
      }
      if (isIOS) {
        var s = {}
        this.$bridge.callhandler('closed', s, (data) => {})
      }
    },
    onCancel () {
      // Toast('取消')
    },
    showActionSheet () {
      this.show = true
    },
    onSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false
      // Toast(item.name)
      this.$router.push({ path: '/about' })
    },
    handleSearch () {
      this.$router.push({ path: '/search' })
    },
    handleBackGo () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.head_nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: #fff;
}
.container2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  height: 44px;
}
.tittle {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 18px;
  letter-spacing: 1px;
  margin-left: 16px;
}
.bar {
  display: flex;
  align-items: center;
  width: 140px;
  overflow: hidden;
}
.search {
  width: 33px;
  height: 33px;
  // text-align: center;
  margin-right: 13px;
  line-height: 32px;
  img{

  }
}

.bar2 {
  border: 1px solid #ebebeb;
  border-radius: 50px;
  width: 87px;
  height: 31px;
  vertical-align: middle;
  text-align: center;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.bar img {
  // line-height: 32px;
  // text-align: center;
}
.fen {
  width: 1px;
  background: #e2e2e2;
  height: 20px;
}
.left-btn {
  margin-left: 5px;
  margin-top: 3px;
}
.right-btn {
  margin-top: 3px;
  margin-right: 5px;
}
// /deep/.van-hairline--bottom::after {
//   border: none;
// }
/deep/.van-nav-bar__right {
  padding: 0px;
  margin-right: 6px;
}
/deep/.van-nav-bar__text {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  letter-spacing: 1px;
}
/deep/ .van-nav-bar .van-icon {
    color: #999999;
}
</style>
